<template>
    <div class="d1">
        <div v-for="(item,index) in props.any" :key="item" class="d2">
        <input type="checkbox" v-model="item.id" v-if="props.kno" @click="em(index)" >
        <!-- <van-checkbox v-model="item.id" icon-size="100%" v-if="props.kno" ></van-checkbox> -->
            <div class="d2-1">
                <!-- <img :src="item.img" class="im1"> -->
                <van-image
                width="90%"
                height="8rem"
                fit="cover"
                :src="item.img"
                />
            </div>
            <div class="d2-2">
                <p style="margin-top:3%;"> {{item.brandName}}</p> 
                <p style="margin-top:1%;font-size:8px"> 233人已收藏</p> 
                <p style="margin-top:1%;font-size:6px"><a class="a1">满300减30</a> <a class="a1">店铺领券</a>  </p> 
                <p style="margin-top:8%;font-size:18px;color:#8e7e6f"> ¥{{item.price}}
                </p> 
                <button class="bu1" @click="dj"> 
                    <a>找相似</a>  
                <!-- <van-button round type="primary" >找相似</van-button> -->
                </button> 
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import axios from 'axios'
    // let any=reactive([])
    let checked = ref(false);
    let props=defineProps(["kno","zi","any"])
    // console.log(props.kno);
    let dj=function(){
        
    }
    // interface Emits{
    //     (event:"taps",name:any):void
    // }
    // let emit=defineEmits<Emits>()

    let em=function(b:any){
        // emit("taps",b)        
    }
    // console.log(props.zi);
    
    onMounted:{
       
        // axios.get('https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/list')
        // .then(res=>{
        //     // console.log(res.data.list);
        //     // any=res.data.list
        //     res.data.list.forEach( item =>{
        //         // console.log(item);
        //         any.push(item)
        //         // console.log(any);
                
        //     })
        //     // console.log(any[0]);
        // })
    }

</script>

<style  scoped>
    .im1{width: 90%;}
    .a1{display: inline-block;border: 1px solid #8e7e6f;font-size: 8px;height: 100%; }
    .bu1{border: 1px solid #8e7e6f; color: #8e7e6f;margin-left:70%; transform:translateY(-30%) ;border-radius: 35%;}
    .d1{width: 100%;display: flex;flex-wrap: wrap;height: 100%;}
    .d2{display: flex;width: 90%;height: 20%;border-radius: 2%; box-shadow:0 0 2px #000;margin-left:5%;margin-right:5%;margin-top:3%;background-color:white   ;}
    .d2-1{width: 50%;height:50% ;}
    .d2-2{width:60% ;}
</style>